// 布尔值显示状态
<template>

<div class="has">

    <i class="yes iconfont" v-if='val' :class='yesIcon || yesIconDef'></i>
    <i class="no iconfont" v-else :class='noIcon || noIconDef'></i>
    <!-- {{ val ? '是' : '否' }} -->
    
</div>

</template>

<script lang='ts'>

// 状态标签
import {Component, Vue, Prop} from 'vue-property-decorator'

@Component({})
export default class status extends Vue{
    
    name:string = 'has'

    // 显示值
    @Prop()
    val:boolean
    
    // true值icon
    @Prop()
    yesIcon:string

    // false值icon
    @Prop()
    noIcon:string

    yesIconDef:string = 'icon-complete'
    noIconDef:string = 'icon-close'
    
}
</script>

<style scoped lang='scss'>

.has{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.yes,
.no{
    margin-right: _rem(4px);
}

.yes{
    color: $success_color;
}

.no{
    color: $danger_color;
}

</style>